<template>
 <div class="parcel-info">
   <!--物流展开信息-->
   <Row :gutter="80">
     <Col span="14" class="left">
       <div class="title">
         <span>查询包裹妥投情况</span>
         <Tooltip placement="top" max-width="400">
           <div class="text" slot="content">
             此数据可以帮助你选择物流线路，数据为真实寄送数据，时效数据日期可以调整，我们把妥投情况区分成两种：已妥投和暂未妥投。对于已妥投的包裹，我们分成了多个妥投日期区间占比供你查看；对于暂未妥投的包裹，你可以查看截止目前暂未妥投的百分比。
           </div>
           <span class="icon-cursor iconfont icon-bangzhu"></span>
         </Tooltip>
       </div>
       <div class="parcel-content">
         <!--选择搜索-->
          <div class="select-search">
            <Select class="select-item" placeholder="选择洲/省，获得精准数据" clearable v-model="model11" filterable>
              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            <DatePicker class="select-item" type="daterange" split-panels placeholder="选择日期"></DatePicker>
            <Button class="view-btn" long type="primary">更新</Button>
          </div>
         <div class="date-info">
           <span class="title">DHL小货 to 美国</span>
           <span class="hint">2024-03-11-2024-03-26期间发货的所有包裹，截至今天查询已妥投包裹时效</span>

           <div class="date-list">
             <div class="item">
              <div class="item-top">
                <span class="label">0-7天</span>
                <span class="schedule">70%</span>
              </div>
               <Progress class="progress" status="success" :percent="100" :stroke-width="6" hide-info />
             </div>
             <div class="item">
               <div class="item-top">
                 <span class="label">8-15天</span>
                 <span class="schedule">70%</span>
               </div>
               <Progress class="progress" status="success" :percent="80" :stroke-width="6" hide-info />
             </div>
             <div class="item">
               <div class="item-top">
                 <span class="label">16-25天</span>
                 <span class="schedule">70%</span>
               </div>
               <Progress class="progress" status="success" :percent="70" :stroke-width="6" hide-info />
             </div>
             <div class="item">
               <div class="item-top">
                 <span class="label">26-40天</span>
                 <span class="schedule">70%</span>
               </div>
               <Progress class="progress" status="success" :percent="50" :stroke-width="6" hide-info />
             </div>
             <div class="item">
               <div class="item-top">
                 <span class="label"> >15天 </span>
                 <span class="schedule">70%</span>
               </div>
               <Progress class="progress" status="success" :percent="25" :stroke-width="6" hide-info />
             </div>
             <div class="item">
               <div class="item-top">
                 <span class="label">03/13-03/28 期间发货的所有包裹，截止今日查询[运输途中/到达待取]包裹占比 / 暂未妥投</span>
                 <span class="schedule">70%</span>
               </div>
               <Progress class="progress" status="success" :percent="98" :stroke-width="6" hide-info />
             </div>
           </div>
         </div>
       </div>
     </Col>
     <Col span="10" class="right">
       <div class="title">
         <span>包裹限制</span>
       </div>
       <div class="parcel-content">
         <div class="info">
            <div class="info-top">
              <div class="info-item">
                <span class="label">最低重量限制</span>
                <span class="value">--</span>
              </div>
              <div class="info-item max-info">
                <span class="label">最高重量限制</span>
                <span class="value">300g</span>
              </div>
            </div>
           <div class="info-item">
             <span class="label">尺寸限制</span>
             <span class="value">最长边不得大于 150cm / （宽+高）*2 +最长边不得大于 300cm</span>
           </div>
           <div class="info-item">
             <span class="label">体积计费规则</span>
             <span class="value">包裹任意单边长度>60CM，将会计算体积重，体积重（kg）=长*宽*高（cm）/6000</span>
           </div>
           <div class="tag-title">
             <div class="tag-item">
               <span class="round-icon"></span>
               <span class="text">不可寄送</span>
             </div>
             <div class="tag-item">
               <span class="round-icon may-round"></span>
               <span class="text">可寄送</span>
             </div>
           </div>
         </div>
         <div class="tag-list">
           <div class="tag-item" v-for="i in 4">
             <span class="name">服饰：</span>
             <div class="list">
               <Tag class="tag" color="#51B481">success</Tag>
               <Tag class="tag" color="#E76202">warning</Tag>
             </div>
           </div>

         </div>
       </div>
     </Col>
   </Row>
   <div class="label-title">
     计费标准
   </div>
   <Table class="table-wrap" :columns="columns1" :data="data1"></Table>

   <div class="ratepaying">
     <div class="label-title">
       缴税方式
       <Tooltip placement="top" max-width="200px">
         <div class="text" slot="content">
           <span>如果多项可在提交包裹页面自行选择</span>
         </div>
         <span class="icon-cursor iconfont icon-bangzhu"></span>
       </Tooltip>
     </div>
     <div class="ratepaying-tag">
       <Tag type="dot" color="success">收件人纳税</Tag>
       <Tooltip placement="top" max-width="300px">
         <div class="text" slot="content">
           <span>选择此缴税方式，由收件人自行缴纳税款。请关注邮件、短信以及电话，谢谢！</span>
         </div>
         <span class="icon-cursor iconfont icon-bangzhu"></span>
       </Tooltip>
     </div>
   </div>

   <div class="peculiarity">
     <div class="label-title">
       线路特点
     </div>
      <div class="text">
        基本特点： 1、快递渠道，商业清关； 2、时效快，稳定性高，贵重紧急包裹首选； 3、包裹派送不成功会被退回当地DHL派送点，可以联系当地DHL再次派送或自提包裹。长时间未妥投的包裹可能会被DHL退回发件人，且会产生高昂的退件费，请及时签收包裹。 禁止寄送: 内置电池产品，液体，粉末以及食品等敏感品；该路线仅支持寄送普通货物
      </div>
   </div>
 </div>
</template>

<script>
export default {
  name: "parcel-info",
  data() {
    return {
      columns1: [
        {
          title: '首重价格',
          render: (h, params) => {
            let row = params.row;
            return h('div', {}, [
              h('div', {
                style: {
                  textDecoration: 'line-through'
                }
              }, '¥ 160.00/ 500 g'),
              h('div', {
                style: {
                  color: '#E76202'
                }
              }, '¥ 160.00/ 500 g'),
            ])
          }
        },
        {
          title: '续重价格',
          render: (h, params) => {
            let row = params.row;
            return h('div', {}, [
              h('div', {
                style: {
                  textDecoration: 'line-through'
                }
              }, '¥ 160.00/ 500 g'),
              h('div', {
                style: {
                  color: '#E76202'
                }
              }, '¥ 160.00/ 500 g'),
            ])
          }
        },
        {
          title: '物流商处理费',
          render: (h, params) => {
            let row = params.row;
            return h('div', {}, '$ 25.00')
          }
        },
        {
          title: '燃油费',
          render: (h, params) => {
            let row = params.row;
            return h('div', {}, '$ 25.00')
          }
        },
        {
          title: '操作费',
          render: (h, params) => {
            let row = params.row;
            return h('div', {}, '$ 25.00')
          }
        }
      ],
      data1: [
        {
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
          date: '2016-10-03'
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          date: '2016-10-01'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          date: '2016-10-02'
        },
        {
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        }
      ],
      cityList: [
        {
          value: 'New York',
          label: 'New York'
        },
        {
          value: 'London',
          label: 'London'
        },
        {
          value: 'Sydney',
          label: 'Sydney'
        },
        {
          value: 'Ottawa',
          label: 'Ottawa'
        },
        {
          value: 'Paris',
          label: 'Paris'
        },
        {
          value: 'Canberra',
          label: 'Canberra'
        }
      ],
      model11: '',
    }
  }
}
</script>

<style scoped lang="less">
.parcel-info {
  padding: 15px 0;
  .left {
    .title {
      margin-bottom: 16px;
      color: @t-title-color;
      font-weight: 500;
      font-size: 14px;
      .text {
        color: #FFFFFF;
        font-weight: 400;
        font-size: 14px;
      }
      .icon-cursor {
        cursor: pointer;
        color: @t-text-color;
        font-size: 14px;
      }
    }
    .parcel-content {
      max-height: 560px;
      .select-search {
        display: flex;
        .select-item {
         flex: 1;
          margin-right: 24px;
        }
        .view-btn {
          width: 104px;
          background: @t-title-color;
          border-color: @t-title-color;
        }
      }
      .date-info {
        margin-top: 32px;
        .title {
          color: @t-title-color;
          font-weight: 500;
          font-size: 14px;
        }
        .hint {
          display: block;
          margin-bottom: 16px;
          color: @t-text-color;
          font-weight: 400;
          font-size: 10px;
        }
        .date-list {
          .item {
            margin-top: 24px;
            &:first-child {
              margin-top: 0;
            }
            .item-top {
              display: flex;
              justify-content: space-between;
              margin-bottom: -8px;
              color: @t-title-color;
              font-size: 12px;
              .label {}
              .schedule {}
            }
            .progress {

            }
          }
        }
      }
    }
  }
  .right {
    .title {
      margin-bottom: 16px;
      color: @t-title-color;
      font-weight: 500;
      font-size: 14px;
    }
    .parcel-content {
      max-height: 560px;
      display: flex;
      flex-direction: column;
      .info {
        .info-top {
          display: flex;
          .info-item {
            flex: 1;
          }
          .max-info {
            .value {
              display: block;
              color: @t-title-color;
              font-weight: 700;
              font-size: 16px;
            }
          }
        }
        .info-item {
          margin-bottom: 24px;
          .label {
            display: block;
            color: @t-special-color;
            font-size: 12px;
          }
          .value {
            display: block;
            color: @t-title-color;
            font-weight: 500;
            font-size: 12px;
          }
        }
        .tag-title {
          display: flex;
          margin-bottom: 12px;
          .tag-item {
            display: flex;
            align-items: center;
            margin-right: 24px;
            .round-icon {
              display: block;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background: @primary-color;
            }
            .may-round {
              background: @success-color;
            }
            .text {
              color: @t-special-color;
              font-weight: 400;
              font-size: 10px;
            }
          }
        }
      }
      .tag-list {
        flex: 1;
        overflow: auto;
        .tag-item {
          margin-top: 24px;
          &:first-child {
            margin-top: 0;
          }
          .name {
            display: block;
            margin-bottom: 4px;
            color: @t-title-color;
            font-weight: 500;
            font-size: 14px;
          }
          .tag {
            line-height: 18px;
            :deep(.ivu-tag-text) {
              line-height: normal;
            }
          }
        }
      }
    }
  }
  .label-title {
    display: flex;
    align-items: center;
    margin-top: 50px;
    color: @t-title-color;
    font-weight: 500;
    font-size: 14px;
    .icon-cursor {
      cursor: pointer;
      color: @t-text-color;
      font-size: 14px;
    }
    .text {
      color: #FFFFFF;
      font-size: 14px;
    }
  }
  .ratepaying-tag {
    display: flex;
    align-items: center;
    .text {
      color: #FFFFFF;
      font-size: 14px;
    }
    .icon-cursor {
      cursor: pointer;
      color: @t-text-color;
      font-size: 14px;
    }
  }
  .table-wrap {
    margin-top: 16px;
  }
  .peculiarity {
    color: @t-text-color;
    font-size: 12px;
    .text {
      margin-top: 16px;
    }
  }
}
</style>